//gulp 压缩需要解决两个问题1、兼容问题2、缓存问题（也就是css，js随即名的问题）
const gulp = require('gulp')
const uglify = require('gulp-uglify') //压缩js
const clean = require('gulp-clean') //清除文件
//兼容问题直接看的讲义
const babel = require('gulp-babel') //解决es6兼容问题
const rev = require('gulp-rev') //缓存问题，随即名
const revCollector = require('gulp-rev-collector') //html 替换路径
const minifyCss = require('gulp-minify-css') //压缩css
const imagemin = require('gulp-imagemin') //压缩图片
const htmlmin = require('gulp-htmlmin') //压缩图片
// const { over } = require('lodash')

const fs = require('fs')
gulp.task('clean', (over) => {
    if (fs.existsSync('./dist/')) {
        gulp.src('./dist/', { read: false }).pipe(clean()) //百度，不要自己想当然
    }
    setTimeout(() => {
        over()
    }, 2000)
})
// 打包js
gulp.task('js', (over) => {
    gulp.src('./src/js/*.js')
        .pipe(babel({ presets: ['env'] }))
        .pipe(uglify())
        .pipe(rev())
        .pipe(gulp.dest('./dist/js/')) //注意目录，没有上级目录
        // 记录随机名在temp的js文件下
        .pipe(rev.manifest())
        .pipe(gulp.dest('temp/js/'))
    over()
})
//打包css
gulp.task('css', (over) => {
    gulp.src('./src/css/*.css')
        // .pipe(babel({ presets: ['env'] })) //没有es6兼容问题
        .pipe(minifyCss())
        .pipe(rev())
        .pipe(gulp.dest('./dist/css/'))
        // 记录随机名在temp的css文件下
        .pipe(rev.manifest())
        .pipe(gulp.dest('temp/css/'))
    over()
})
//打包img
gulp.task('imgs', (over) => {
    gulp.src('./src/imgs/*.*').pipe(imagemin()).pipe(gulp.dest('./dist/imgs/')) //不需要随机数没有兼容问题
    setTimeout(() => {
        over()
    }, 30000)
})
// 打包html
gulp.task('html', (over) => {
    var options = {
        collapseWhitespace: true,
        collapseBooleanAttributes: true,
        removeComments: true,
        removeEmptyAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        minifyJS: true,
        minifyCSS: true,
    }

    gulp.src(['./temp/**/*.json', './src/*.html'])
        .pipe(htmlmin(options))
        .pipe(revCollector()) //替换随机数
        .pipe(server.stream())
        .pipe(gulp.dest('./dist/'))
    over()
})
// =============================
const server = require('browser-sync').create() //自动刷新
const watch = require('gulp-watch') //监听
gulp.task('build', gulp.series('clean', 'js', 'css', 'imgs', 'html'), () => {
    console.log('build 打包完成')
})
const { createProxyMiddleware } = require('http-proxy-middleware')

gulp.task('serve', () => {
    server.init({
        server: {
            baseDir: './src',
            middleware: [
                // ...
                createProxyMiddleware('/api', {
                    // 目标服务器网址
                    target: '后端接口地址',
                    changeOrigin: true, // 是否允许跨域
                    secure: false, // 关闭SSL证书验证https协议接口需要改成true
                    pathRewrite: {
                        // 重写路径请求
                        // 移除
                        // '^/remove/api' : ''
                        '^/api': '',
                    },
                }),
            ],
        },
        port: 80,
    })

    // 监控文件修改
    watch('src/*.html', function () {
        console.log('你修改HTML文件了')
        server.reload()
    })
    watch('src/style/*.css', function () {
        console.log('你修改CSS文件了')
        server.reload()
    })
    watch('src/js/*.js', function () {
        console.log('你修改JS文件了')
        server.reload()
    })
})
